<template>
  <div class="tooltip-demo">
    <h3 class="title">普通的提示</h3>
    <div>
      <p>
        <d-switch small v-model="enable">开启</d-switch>
      </p>
      <p>
        <d-button v-tooltip="enable" :content="content" @click="content += 1">Directive调用，点我</d-button>
      </p>
      <p>
        <d-tooltip :content="content" :disabled="!enable">
          <d-button @click="content += 1">Component调用，点我</d-button>
        </d-tooltip>
      </p>
    </div>
    <h3 class="title">不同位置的提示</h3>
    <div>
      <d-row :space="10" v-width="300" style="margin-left: 80px;">
        <d-col :width="8">
          <d-button v-tooltip placement="top-start" content="提示语">上左</d-button>
        </d-col>
        <d-col :width="8">
          <d-button v-tooltip placement="top" content="提示语">上中</d-button>
        </d-col>
        <d-col :width="8">
          <d-button v-tooltip placement="top-end" content="提示语">上右</d-button>
        </d-col>
        <d-col :width="8">
          <d-button v-tooltip placement="left-start" content="提示语">左上</d-button>
        </d-col>
        <d-col :width="8">
          <d-button :text="true">中间</d-button>
        </d-col>
        <d-col :width="8">
          <d-button v-tooltip placement="right-start" content="提示语">右上</d-button>
        </d-col>
        <d-col :width="8">
          <d-button v-tooltip placement="left" content="提示语">左中</d-button>
        </d-col>
        <d-col :width="8">
          <d-button :text="true">中间</d-button>
        </d-col>
        <d-col :width="8">
          <d-button v-tooltip placement="right" content="提示语">右中</d-button>
        </d-col>
        <d-col :width="8">
          <d-button v-tooltip placement="left-end" content="提示语">左下</d-button>
        </d-col>
        <d-col :width="8">
          <d-button :text="true">中间</d-button>
        </d-col>
        <d-col :width="8">
          <d-button v-tooltip placement="right-end" content="提示语">右下</d-button>
        </d-col>
        <d-col :width="8">
          <d-button v-tooltip placement="bottom-start" content="提示语">下左</d-button>
        </d-col>
        <d-col :width="8">
          <d-button v-tooltip placement="bottom" content="提示语">下中</d-button>
        </d-col>
        <d-col :width="8">
          <d-button v-tooltip placement="bottom-end" content="提示语">下右</d-button>
        </d-col>
      </d-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tooltipDemo',
  data () {
    return {
      enable: true,
      content: '1'
    }
  }
}
</script>

<style lang="stylus" scoped>
// .tooltip-demo
</style>
